.banner{
    width: 100%;
    height: 200px;
    background-color: pink;
    overflow: hidden;
    .swiper {
        width: 100%;
        height: 200px;
    } 
    .bg01{
        background: url(../../assets/imgs/course-img03.jpg) center;
        background-size: cover;
    }
    .bg02{
        background: url(../../assets/imgs/course-img04.jpg) center;
        background-size: cover;
    }
    .bg03{
        background: url(../../assets/imgs/course-img05.jpg) center;
        background-size: cover;
    }
}
main{
    padding: 0px 15px 15px;
    flex-wrap: wrap;
    overflow: scroll;
    // 排行榜
    .rank{
        width: 145px;
        height: 145px;
        background-color: pink;
        padding: 15px 0px 0px 15px;
        overflow: hidden;
        background-color: #1592CC ;
        margin-right: 20px;
        img{
            width: 120px;
            height: 120px;
            left: -15px;
            top: 30px;
            opacity: 0.5;
        }
        span{
            color: #fff;
            font-size: 48px;
            font-weight: 700;
            right: 15px;
            bottom: 20px;
        }
    }
//  打卡
    .card{
        width: 180px;
        height: 145px;
        background-color:#9fd9f8;
        padding: 15px 0px 0px 15px;
        img{
            width: 110px;
            height: 110px;
            bottom: 10px;
            left: 10px;
        }
        span{
            display: inline-block;
            width: 100px;
            line-height: 40px;
            border-radius: 20px;
            border: 2px solid #004E73 ;
            right: 15px;
            bottom: 25px;
            color: #004E73 ;
            font-weight: bold;
        }
    }
//   数据
.data{
    width: 165px;
    height: 110px;
    margin-right: 20px;
    img{
        width: 100%;
        height: 100%;
    }

}
// 徽章
.badge{
    width: 160px;
    height: 110px;
    background-color: #9dbde3;
    img{
        width: 70%;
        height: 70%;
        left: 0;
        bottom: 0;
    }
    p{
        right: 10px;
        bottom: 5px;
    }
    .num{
        font-size: 80px;
        color: #004e73;
        font-weight: bold;
       
    }
}
// 课程训练, 
.train{
    width: 385px;
    height: 110px;
    img{
        width: 100%;
       height: 100%;
    }
}
// 户外跑步
.run{
    width: 385px;
    height: 110px;
    img{
        width: 100%;
       height: 100%;
    }
}
}
h3{
    top: 12px;
    left: 15px;
    font-weight: bold;
    color:white;
}
